<template>
  <el-drawer
    title="环境变量示例"
    v-model="value"
    direction="rtl"
    @open="drawerOpenHandler"
  >
    <div class="envVariables">
      <textarea ref="envVariablesEditor">
{
  "${javaPath}": "src/main/java",
  "${author}": "lvws",
  "${date}": "2021-06-20",
  "${package}": "org.jaguar.modules.codegen",
  "${packagePath}": "org/jaguar/modules/codegen",
  "${module}": "codegen",
  "${entity}": "CodeTemplate",
  "${entityName}": "codeTemplate",
  "${dateTimeScore}": 0,
  "${table}": {
    "createTime": "2021-06-19 20:45:13",
    "engine": "InnoDB",
    "tableComment": "代码模板",
    "tableName": "jaguar_modules_codegen_code_template"
  },
  "${columns}": [{
    "columnComment": "模板类型",
    "columnName": "code_template_type",
    "columnType": "varchar(20)",
    "dataType": "varchar",
    "fieldName": "codeTemplateType",
    "fieldMethodName": "CodeTemplateType",
    "filedType": "String"
  }, {
    "columnComment": "模板文件",
    "columnName": "code_template_file",
    "columnType": "text",
    "dataType": "text",
    "fieldName": "codeTemplateFile",
    "fieldMethodName": "CodeTemplateFile",
    "filedType": "String"
  }, {
    "columnComment": "模板版本",
    "columnName": "code_template_version",
    "columnType": "int(11)",
    "dataType": "int",
    "fieldName": "codeTemplateVersion",
    "fieldMethodName": "CodeTemplateVersion",
    "filedType": "Integer"
  }]
}
      </textarea>
    </div>
  </el-drawer>
</template>
<script>
import CodeMirror from 'codemirror'

export default {
  name: 'EnvVariable',
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      required: true,
    },
  },
  data() {
    return {
      envVariablesEditor: null,
      cmOptions: {
        mode: 'application/json', //Java语言
        smartIndent: true, // 自动缩进
        autoCloseBrackets: true, // 自动补全括号
        tabSize: 4, // tab的空格个数
        theme: 'dracula', //主题样式
        lineNumbers: true, //是否显示行数
        lineWrapping: true, //是否自动换行
        styleActiveLine: true, //line选择是是否加亮
        matchBrackets: true, //括号匹配
        option: {
          autofocus: true,
        },
        readOnly: true,
      },
    }
  },
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
  },
  methods: {
    drawerOpenHandler() {
      if (this.envVariablesEditor) return

      this.$nextTick(() => {
        this.envVariablesEditor = CodeMirror.fromTextArea(
          this.$refs.envVariablesEditor,
          this.cmOptions
        )
      })
    },
  },
}
</script>
